<template>
  <div>
    <el-menu
      id="menu"
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      background-color="unset"
      style="padding-left: 50px"
    >
      <table>
        <tr>
          <td style="width: 200px" v-for="item in typeList" :key="item.id">
            
            
            <el-menu-item index="1" @click="getType(item.type)">{{
              item.type
            }}</el-menu-item>
          </td>
        </tr>
      </table>
    </el-menu>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: "1",

      type: "推荐",
      typeList: [
        
        {
          type: "推荐",
        },
        {
          type: "奥运",
        },
        {
          type: "音乐",
        },
        {
          type: "娱乐",
        },
        {
          type: "其它",
        },
      ],
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    // 监听到点击的分类
    getType(type) {
      this.type = type;
      this.$router.push({
        
        path: "/articleinfo",
        query: {
          type: this.type,
        }, // 参数传值
      });
      location.reload();
    },
  },
};
</script>

<style scoped>
#menu > * {
  width: 230px;
}

.el-menu-item.is-active {
  width: 230px;
}
</style>